<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>daohang</title>
    <link rel="stylesheet" href="../xinzuoye/rlq.css">
    <script src="../xinzuoye/jquery.js" type="text/javascript"></script>
</head>
<body>


<div class="menu" id="fd">
    <div class="box" style="display:none;">
        <a class="t1" href="http://www.baidu.com/"></a>
        <a class="t2" href="http://www.runoob.com/"></a>
        <a class="t3" href="http://www.bootcss.com/"></a>
        <a class="t4" href="http://www.easyicon.net/"></a>
        <a class="t5" href="http://www.peise.net/"></a>
        <a class="t6" href="http://hao.uisdc.com/"></a>
    </div>
</div>

</body>
<script>
    //浮动导航条展开与收缩
    $(function () {
        var box = $('.menu .box');
        $('.menu').hover(function () {
            box.stop().show(300);
        }, function () {
            box.stop().hide(150);
        })
    })

    //浮动导航条拖动
    $(function () {
        var box = document.getElementById('fd');
        box.onmousedown = function (event) {
            var e = event || window.event,
                    t = e.target || e.srcElement,
            //鼠标按下时的坐标x1,y1
                    x1 = e.clientX,
                    y1 = e.clientY,
            //鼠标按下时的左右偏移量
                    dragLeft = this.offsetLeft,
                    dragTop = this.offsetTop;
            document.onmousemove = function (event) {
                var e = event || window.event,
                        t = e.target || e.srcElement,
                //鼠标移动时的动态坐标
                        x2 = e.clientX,
                        y2 = e.clientY,
                //鼠标移动时的坐标的变化量
                        x = x2 - x1,
                        y = y2 - y1;
                box.style.left = (dragLeft + x) + 'px';
                box.style.top = (dragTop + y) + 'px';
            }
            document.onmouseup = function () {
                this.onmousemove = null;
            }
        }
    })

</script>
</html>